<!-- home -->
<template>
  <div class="index-voting index-container">
    <van-nav-bar title="选手投票" ref="nav" />
    <div class="about-container" v-bind:style="{ marginTop: `${navBarHeight}px` }">
      <div class="warpper" v-bind:style="{ minHeight: `calc(${innerHeight}px - ${navBarHeight}px - ${tabBarHeight}px)` }">
        <div class="infom">
          <img src="@/assets/img/game/资源26.png" alt="" />
          <span>快来选择赛区，给你喜欢的作品投票吧~</span>
        </div>
         <van-loading size="40px" v-if="isloadig === false">加载中...</van-loading>
        <div class="list">
          <div class="item" v-for="(item, index) in competitonList" :key="index">
            <router-link :to="{ path: '/voting/competition', query: { id: item.id } }" class="list-box">
              <img :src="item.bg_image" alt="" lazy-load />
              <!-- <div class="title">{{ item.name }}</div> -->
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 请求接口
import { getCompetiton } from '@/api/user.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      navBarHeight: 0,
      competitonList: [],
      innerHeight: 0,
      isloadig:false
    }
  },
  computed: {
    ...mapGetters(['tabBarHeight'])
  },
  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight //获取组件元素高度
    this.innerHeight = window.innerHeight
    this.initData()
  },
  methods: {
    // 请求数据案例
    initData() {
      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
      getCompetiton()
        .then(res => {
          if (res.code === 200) {
            let datas = res.data
            this.competitonList = datas
          }
          this.isloadig = true
        })
    }
  }
}
</script>
<style lang="scss">
.about-container {
  /* 你的命名空间 */
  background: #fff;
  box-sizing: border-box;

  .warpper {
    padding: 12.5px 15px 15px 15px;
    box-sizing: border-box;
    .infom {
      width: 85%;
      margin: 0 auto;
      border: 1px solid #F61E51;
      border-radius: 6px;
      padding: 5px 6px;
      vertical-align: middle;
      img {
        width: 20px;
        height: 18.5px;
        margin-right: 10px;
        vertical-align: middle;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        color: #F61E51;
        font-size: 13px;
      }
    }

    .list {
      color: #666;
      font-size: 14px;
      margin-top: 13px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        width: 49%;
        height: 234px;
        position: relative;
        box-sizing: border-box;
        margin-bottom: 4px;
        img {
          width: 100%;
          height: 100%;
        }

        .title {
          position: absolute;
          right: 20px;
          top: 20px;
          font-size: 16px;
          letter-spacing: 6px;
          background-image: linear-gradient(90deg, #ffffff 0%, #999999 100%);
          writing-mode: vertical-lr;
          /*从左向右 从右向左是 writing-mode: vertical-rl;*/
          writing-mode: tb-lr;
          /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
  }
}
</style>
